<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <link href="./css/mycss.css" rel="stylesheet">
    <link href="./css/framework/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="./css/register.css" rel="stylesheet">
    <!-- JS部分 -->
    <script src="./bootstrap-5.1.3-dist/js/jquery-3.6.0.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js">
    </script>
    <script rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="./js/myjs.js">
    </script>
    <title>index</title>
</head>

<body>
    <header class="container-fluid bg-nblack">
        <!-- 头部1 -->
        <div class="row bg-ngrey header_top">
            <div class="col-lg-1 offset-lg-1 col-md-4"><a href="#"><i class="fa fa-phone"></i>021-95-85</a></div>
            <div class="col-lg-1 col-md-4"><a href="#"><i class="fa fa-envelope-o"></i>email.com</a></div>
            <div class="col-lg-1 col-md-4"><a href="#"><i class="fa fa-map-marker"></i>1774 Roda</a></div>
            <div class="col-3 offset-lg-5 row usechange">
                <div class="col-3 col-md-6 dis_b"><a href="#"><i class="fa fa-dollar"></i>USD</a></div>
                <div class="col-3 col-md-6 dis_b"><a href="#"><i class="fa fa-user-o"></i>My</a></div>
            </div>
        </div>
        <!-- 头部2 -->
        <div class="container-lg header_mid mt_big pad_bot nav_2">
            <div class="row mt_small">
                <div class="col-lg-2 offset-lg-1 col-md-12 juzhong"><span class="text_1">Electro</span>
                    <div class="r_circle"></div>
                </div>
                <div class="col-lg-6 col-md-12 mt_big">
                    <select type="text" class="in_1">
                        <option value="Ocategoral">Ocategoral</option>
                        <option value="styuyanfg">styuyanfg</option>
                        <option value="jingguich">jingguich</option>
                        <option value="lvjiahao">lvjiahao</option>
                    </select>
                    <input type="text" placeholder="searsh here" class="in_2">
                    <input type="text" class="in_3 text_weight_6" value="searsh">
                </div>
                <div class="col-lg-3 offset-lg-0 col-md-6 offset-md-5 pic mt_big">
                    <div class="col-lg-3 dis_in pos_r">
                        <i class="fa fa-heart-o"></i>
                        <span class="text-main">Your wishlist</span>
                        <div class="r_circle">3</div>
                    </div>
                    <div class="col-lg-3 offset-lg-3 dis_in pos_r">
                        <i class="fa fa-shopping-cart"></i>
                        <span class="text-main">Your wishlist</span>
                        <div class="r_circle">3</div>
                    </div>
                    <!-- 响应式按钮 Toggler/collapsibe Button -->
                    <div class="dis_in mybtn_1">
                        <i class="fa fa-bars"></i>
                        <span class="text-main">Menu</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div class="nav_n bg-nwhite ">
        <div class="line line_red"></div>
        <div class="col-lg-11 offset-lg-1">
            <nav class="navbar navbar-expand-md">
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ">
                        <li class="nav-item base">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Hot Deals</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Categories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Laptops</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Smartphones</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cameras</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Accessories</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="line line_grey mm_4"></div>
    <!-- 三个商品展示页面部分 -->
    <div class="container-lg shangpin">
        <div class="row">
            <div class="col-lg-4 col-md-6 img_11 ">
                <div class="myimg img_1">
                    <div class="shape">
                        <div class="font">
                            <span class="mytext">Laptop<br>Collection</span>
                            <span class="mytext_b">SHOW NOW <i class="fa fa-arrow-circle-right"></i> </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 img_11">
                <div class="myimg img_2">
                    <div class="shape">
                        <div class="font">
                            <span class="mytext">Accessories<br>Collection</span>
                            <span class="mytext_b">SHOW NOW <i class="fa fa-arrow-circle-right"></i> </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 img_11">
                <div class="myimg img_3">
                    <div class="shape">
                        <div class="font">
                            <span class="mytext">Cameras<br>Collection</span>
                            <span class="mytext_b">SHOW NOW <i class="fa fa-arrow-circle-right"></i> </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 四个新商品部分 -->
    <div class="container-lg mt_6 four_shangpin">
        <!-- 商品导航 -->
        <div class="row">
            <div class="col-lg-4 mt-1 nav_text_1 text_weight_6">NEW PRODUCTS</div>
            <div class="col-lg-4 offset-lg-4">
                <nav class="navbar navbar-expand-sm ">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Laptops</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text_grey_2" href="#">Smartphones</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text_grey_2" href="#">Cameras</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text_grey_2" href="#">Accessories</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- 商品展示 -->
        <div class="row mt-4">
            <div class="col-lg-3 col-md-6 prodZone">
                <div class="prodShow">
                    <div class="mybox down">-30%</div>
                    <div class="mybox new">NEW</div>
                    <div class="myimg myimg_1"></div>
                    <div class="myalltext">
                        <span class="text_grey text_small">CATECOPY</span>
                        <span class="mt-2 text_weight_6">PRODUCT NAME COES</span>
                        <span class="text_weight_6">HERE</span>
                        <p class="text_red text_big text_weight_7">$980</p>
                        <p class="text_grey text_del ms-2">$990</p>
                        <div class="star text_red">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="mytext_buttom text_grey_b mt-4">
                        <div class="iall_box">
                            <div class="i_box"><i class="fa fa-heart-o"></i></div>
                            <div class="i_box me-3 ms-3"><i class="fa fa-exchange"></i></div>
                            <div class="i_box"><i class="fa fa-eye"></i></div>
                        </div>
                    </div>
                </div>
                <div class="prodPop">
                    <div class="box_red bg-nred mt-3">
                        <i class="fa fa-shopping-cart "></i>
                        <span>ADD TO CARD</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 prodZone">
                <div class="prodShow">
                    <div class="mybox new2">NEW</div>
                    <div class="myimg myimg_2"></div>
                    <div class="myalltext">
                        <span class="text_grey text_small">CATECOPY</span>
                        <span class="mt-2 text_weight_6">PRODUCT NAME COES</span>
                        <span class="text_weight_6">HERE</span>
                        <p class="text_red text_big text_weight_7">$980</p>
                        <p class="text_grey text_del ms-2">$990</p>
                        <div class="star text_red">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="mytext_buttom text_grey_b mt-4">
                        <div class="iall_box">
                            <div class="i_box"><i class="fa fa-heart-o"></i></div>
                            <div class="i_box me-3 ms-3"><i class="fa fa-exchange"></i></div>
                            <div class="i_box"><i class="fa fa-eye"></i></div>
                        </div>
                    </div>
                </div>
                <div class="prodPop">
                    <div class="box_red bg-nred mt-3">
                        <i class="fa fa-shopping-cart "></i><span>ADD TO CARD</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 prodZone">
                <div class="prodShow">
                    <div class="myimg myimg_3"></div>
                    <div class="myalltext">
                        <span class="text_grey text_small">CATECOPY</span>
                        <span class="mt-2 text_weight_6">PRODUCT NAME COES</span>
                        <span class="text_weight_6">HERE</span>
                        <p class="text_red text_big text_weight_7">$980</p>
                        <p class="text_grey text_del ms-2">$990</p>
                        <div class="star text_red">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="mytext_buttom text_grey_b mt-4">
                        <div class="iall_box">
                            <div class="i_box"><i class="fa fa-heart-o"></i></div>
                            <div class="i_box me-3 ms-3"><i class="fa fa-exchange"></i></div>
                            <div class="i_box"><i class="fa fa-eye"></i></div>
                        </div>
                    </div>
                </div>
                <div class="prodPop">
                    <div class="box_red bg-nred mt-3">
                        <i class="fa fa-shopping-cart "></i>
                        <span>ADD TO CARD</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 prodZone">
                <div class="prodShow">
                    <div class="mybox down">-30%</div>
                    <div class="myimg myimg_4"></div>
                    <div class="myalltext">
                        <span class="text_grey text_small">CATECOPY</span>
                        <span class="mt-2 text_weight_6">PRODUCT NAME COES</span>
                        <span class="text_weight_6">HERE</span>
                        <p class="text_red text_big text_weight_7">$980</p>
                        <p class="text_grey text_del ms-2">$990</p>
                        <div class="star text_red">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="mytext_buttom text_grey_b mt-4">
                        <div class="iall_box">
                            <div class="i_box"><i class="fa fa-heart-o"></i></div>
                            <div class="i_box me-3 ms-3"><i class="fa fa-exchange"></i></div>
                            <div class="i_box"><i class="fa fa-eye"></i></div>
                        </div>
                    </div>
                </div>
                <div class="prodPop">
                    <div class="box_red bg-nred mt-3">
                        <i class="fa fa-shopping-cart "></i>
                        <span>ADD TO CARD</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间图片部分 -->
    <div class="inimg">
        <div class="myimg img_left col-2"></div>
        <div class="mycircle my-5">
            <div class="circle"><span class="text-main text_weight_6 text_bigb mt-4">02</span><span
                    class="text-main">DAYS</span></div>
            <div class="circle"><span class="text-main text_weight_6 text_bigb mt-4">02</span><span
                    class="text-main">DAYS</span></div>
            <div class="circle"><span class="text-main text_weight_6 text_bigb mt-4">02</span><span
                    class="text-main">DAYS</span></div>
            <div class="circle"><span class="text-main text_weight_6 text_bigb mt-4">02</span><span
                    class="text-main">DAYS</span></div>
            <div class="text_center dis_bl mt-4">HOT DEAL THIS WEEK</div>
            <div class="text_center dis_bl2 mt-2">NEW COLLECTION UP TO 50% OFF</div>
            <div class="box_red bg-nred mt-4">
                <span>ADD TO CARD</span>
            </div>
        </div>
        <div class="myimg img_right col-2"></div>
    </div>
    <footer class="mt-big">
        <div class="f-title mt-4">Sign Up for the <span class="text_weight_6">NEWSLETTER</span> </div>
        <div class="row myinput mt-4">
            <input type="text" class="left col-8 " placeholder="Enter Your Email">
            <button class="right col-4"> <i class="fa fa-envelope"></i> <span class="text_weight_6">Subscribe</span>
            </button>
            <div class="icon mt-5">
                <div class="iconin pos1"><i class="fa fa-facebook"></i> </div>
                <div class="iconin pos"><i class="fa fa-twitter"></i> </div>
                <div class="iconin pos3"><i class="fa fa-instagram"></i></div>
                <div class="iconin pos4"><i class="fa fa-pinterest"></i></div>
            </div>
        </div>
    </footer>
    <div class="last container-fluid bg-black row">
        <div class="col-3 offset-1">
            <ul>
                <h4>ABOUT US</h4>
                <li class="color_grey mt-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut.</li>
                <li class="color_grey mt-2"> <i class="fa fa-map-marker me-2"></i> 1734 Stonecoal Road</li>
                <li class="color_grey mt-2"> <i class="fa fa-phone me-2"></i> +021-95-51-84</li>
                <li class="color_grey mt-2"><i class="fa fa-envelope-o me-2"></i> email@email.com</li>
            </ul>
        </div>
        <div class="col-2">
            <ul>
                <h4>Categories</h4>
                <li class="color_grey mt-4">Hot deals</li>
                <li class="color_grey mt-2">Laptops</li>
                <li class="color_grey mt-2">Smartphones</li>
                <li class="color_grey mt-2">Cameras</li>
                <li class="color_grey mt-2">Accessories</li>
            </ul>
        </div>
        <div class="col-2">
            <ul>
                <h4>INFORMATION</h4>
                <li class="color_grey mt-4">About Us</li>
                <li class="color_grey mt-2">Contact Us</li>
                <li class="color_grey mt-2">Privacy Policy</li>
                <li class="color_grey mt-2">Orders and Returns</li>
                <li class="color_grey mt-2">Terms&Conditions</li>
            </ul>
        </div>
        <div class="col-2 ms-5">
            <ul>
                <h4>SERVICE</h4>
                <li class="color_grey mt-4">My Account</li>
                <li class="color_grey mt-2">View Cart</li>
                <li class="color_grey mt-2">Wishlist</li>
                <li class="color_grey mt-2">Track My Order</li>
                <li class="color_grey mt-2">Help</li>
            </ul>
        </div>
    </div>
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script> -->
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <div class="mainNav">
        <ul class="navbar-nav ce">
            <li class="nav-item base mt-5">
                <a class="nav-link color_r" href="#">Home</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Hot Deals</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Categories</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Laptops</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Smartphones</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Cameras</a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link text_grey" href="#">Accessories</a>
            </li>
        </ul>
    </div>
</body>

</html>